// 函数组件
import React, { useState } from 'react'
import './css/OperationLog.less'
import { Button, Table, Switch, Input,Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import AddManagement from './child/AddManagement';
import EditAddManagement from './child/EditAddManagement';
interface DataType {
    key: React.Key;
    id: number;
    userName:string;
    ip: string;
    LastOperatingTime:string;
    role: string;
    OperationRecord: string;
}



function OperationLog() {
    const [isAdd, setIsAdd] = useState<boolean>(false)
    const [isEdit,setIsEdit] = useState<boolean>(false)
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [findInput,setFindInput] =useState<string>() //input 值
    const [findSelected,setFindSelected] = useState<string>() //多选框值
  
    const start = () => {
        setLoading(true);
        // ajax request after empty completing
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'id',
            width: '15%',
            align: 'center'
        },
        {
            title: '操作者',
            dataIndex: 'userName',
            width: '15%',
            align: 'center'
        },
        {
            title: '角色',
            dataIndex: 'role',
            width: '15%',
            align: 'center'
        },
        {
            title: 'IP地址',
            dataIndex: 'ip',
            width: '20%',
            align: 'center'
        },
        {
            title: '最近操作时间',
            dataIndex: 'LastOperatingTime',
            width: '20%',
            align: 'center'
        },
        {
            title: '操作记录',
            dataIndex: 'OperationRecord',
            width: '15%',
            align: 'center'
        },
    ];

    const data: DataType[] = [];
    for (let i = 0; i < 25; i++) {
        data.push({
            key: i,
            id: i,
            userName: `spiderman@lvye.co ${i}`,
            role: "蜘蛛侠",
            ip: "spiderman@lvye.com",
            LastOperatingTime:`描述 ${i}`,
            OperationRecord:`2018-01-08 00:00:00`,
        });
    }

    //批量删除
    const BatchDeletion = () => {
        console.log('批量删除');

    }

     //查找
     const find=()=>{
        console.log(findInput,findSelected);
        
    }
    //input框输入值赋值
    const changeFind = (e:any)=>{
        // console.log(e.target.value);
        setFindInput(e.target.value)
    }
    //多选框赋值
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        setFindSelected(value)
      };
    return (
        <div className='AuthorityManagement'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>成员管理</p>
                </div>
            </div>
            {/* 内容区 */}
            <div className='page-context'>
                {/* 筛选卡片 */}
                <div className='screening-card'>
                    <div className='screening'>
                        <p>筛选查询</p>
                    </div>
                    <div className='input-one'>
                        <p className='one-text'>关键词</p>
                        <Input placeholder="成员账号/姓名" onChange={changeFind}></Input>
                        <p className='two-text'>角色</p>
                        <Select
                            defaultValue=""
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                {
                                    value: 'jack',
                                    label: 'Jack',
                                },
                                {
                                    value: 'lucy',
                                    label: 'Lucy',
                                },
                                {
                                    value: 'disabled',

                                    label: 'Disabled',
                                },
                                {
                                    value: 'Yiminghe',
                                    label: 'yiminghe',
                                },
                            ]}
                        />
                    </div>
                    <div className='twoButton'>
                        <button className='reset'>重置</button>
                        <button className='filter' onClick={find}>筛选</button>
                    </div>
                </div>
                {/* 数据表部分 */}
                <div className='data-list'>
                    {/* 上部文字 */}
                    <div className='list-text'>
                        <p>数据列表</p>
                        <div>
                            <button className='batch-del' onClick={BatchDeletion}>批量删除</button>
                        </div>
                    </div>
                    {/* 数据 */}
                    <div>
                        <div >
                            <span >
                                {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                            </span>
                        </div>
                        <ConfigProvider locale={zh_CN}>
                            <Table
                                rowSelection={rowSelection}
                                columns={columns}
                                dataSource={data}
                                scroll={{ y: 190 }}
                                pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: 5,
                                    pageSizeOptions: [3, 5, 10, 15],
                                    showQuickJumper: true,
                                    showSizeChanger: true
                                }}
                                bordered
                            />
                        </ConfigProvider>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default OperationLog